<template>
    <el-card>
        <div class="title-container">
            <span class="rect"></span>
            <h3 style="margin-bottom: 5px">入驻企业</h3>
        </div>
        <!--    -->
        <l-table ref="mainTable" :loading="tableLoading" :isPage="true" @loadPageData="turnTablePage"
            :columns="settledEnterpriseTableColmuns" :dataSource="tableData">
            <template #name="{ row }" width="220">
                <span class="firm-name-container"><span class="firm-name">{{ row.name || "---" }}</span><el-tag
                        :type="computedType(row.landCompanyRel.occupationType)" class="character-tag"
                        v-if="row.landCompanyRel.occupationType">{{
                            lr_dataItemName(lr_dataItem['role'], row.landCompanyRel.occupationType) }}</el-tag></span>
            </template>
            <template #residence="{ row }">
                <span>{{ row.landCompanyRel.residence || "---" }}</span>
            </template>
            <template v-for="(col, index) in lr_tableColumnsByToLabel(settledEnterpriseTableColmuns)"
                v-slot:[col.prop]="scope">
                <l-value-to-label :value="scope.row[col.prop]" :type="col.dataType" :code="col.dataCode"
                    :valueKey="col.valueKey" :labelKey="col.labelKey" :options="col.options" :format="col.format"
                    :setting="col.setting" :key="index"></l-value-to-label>
            </template>
            <l-table-btns :btns="[]" :filterBtns="filterBtns" @click="lr_handleTableBtnClick" :btnNum="6"></l-table-btns>
        </l-table>
    </el-card>
</template>


<script>
import { settledEnterpriseTableColmuns, companyApi } from "./columns"
export default {
    data() {
        return {
            tableLoading: true,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            settledEnterpriseTableColmuns,
        };
    },
    props: {
        landTableData: {
            type: Object,
            default: () => { }
        }
    },
    computed: {

    },
    methods: {
        computedType(type) {
            switch (type) {
                case "obligee":
                    return "danger";
                case "owner":
                    return "success";
                case "renter":
                    return "warning";
            }
        },
        filterBtns(row, btns) {
            return btns;
        },
        init() {
            this.loadTableData();
        },
        turnTablePage({ rows }) {
            this.tablePageSize = rows;
            this.loadTableData(true);
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let data = await this.$awaitWraper(companyApi.get(this.landTableData.id));
            this.tableData = data.companyList;
            this.tableTotal = data.companyList.length;
            this.tableLoading = false;
        },
    },
    mounted() {
        // this.init();
    }
}
</script>


<style scoped lang='scss'>
.firm-name-container {
    display: flex;
    align-items: center;

    .firm-name {
        display: inline-block;
        // width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .character-tag {
        border-radius: 30px;
        margin-left: 5px;
        height: 26px;
        line-height: 26px;
    }
}
</style>